<template>
  <div
    class="fixed bottom-0 left-0 w-full z-10 p-2 bg-white"
    style="box-shadow: 0px -6px 11px #ffffff"
  >
    <div class="flex w-full">
      <input
        placeholder="说点啥呢?"
        v-model="commentValue"
        type="text"
        class="
          block
          w-full
          h-[44px]
          pl-2
          outline-0
          bg-white
          caret-zinc-400
          rounded
          text-zinc-900
          tracking-wide
          text-sm
          font-semibold
          border border-zinc-300
          duration-500
          mr-1
        "
      />
      <van-button round type="primary" class="w-1/4" @click="sendComment"
        >发表</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Toast } from "vant";
import { postComment } from "@/api/comment.js";
const props = defineProps({
  postid: {
    type: [Number, String],
    default: "",
  },
});
const commentValue = ref("");
const emits = defineEmits(["sendComment"]);
const sendComment = async () => {
  if (!commentValue.value) {
    Toast("请输入评论内容!");
    return;
  }
  await postComment({
    content: commentValue.value,
    postid: props.postid,
  });
  Toast.success("评论成功!");
  commentValue.value = "";
  emits("sendComment");
};
</script>

<style>
/*  */
#inputID:empty:before {
  content: "说点什么好呢？";
  color: gray;
}
#inputID:focus:before {
  content: none;
}
</style>